<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
		<style>
			/* 盒子模型4个元素:content(内容),padding(填充)内边距,border(边框)
			margin(外边距) */
			.box{
				width: 200px;/* 宽 */
				height: 300px;/* 高 */
				/* border-width: 1px; */ /* 边框宽度 */
				/* border-color: red; *//* 边框颜色 */
				/* 2.颜色简写:六位组成,范围在16进制(0-9)(A--F)前面加#号,3.rgb(三个值,每个值0 ~255) */
				/* 边框样式border-style:solid实线 dotted点线  dashed虚线 */
				/* border-style:solid; */
				/* border: solid 1px red; *//* 边框的复合写法 */
				border: solid 1px rgb(168,62,177);
				border-bottom: 10px dotted red;
				border-top: 10px dashed green;
				border-left: 5px solid pink;
				border-right: 5px solid gold;
				/* 方位词:top上,bottom下,left左,right右,center中间 */
				/* padding-top: 50px;
				padding-left: 30px; */
				/* 复合写法: */
				/* padding: 10px; 四个方位的内边距都是10px */
				/* padding: 10px 30px; 第一个值指上下,第二个值指左右 */
				/* padding: 10px 20px 30px;第一个值上,第二个值左右,第三个值下 */
				/* padding: 10px 20px 30px 40px;分别对应上右下左(顺时针) */
			}
		</style>
	</head>
	<body>
		<div class="box">hello box</div>
		
	</body>
</html>

